<script setup>
import { ref, watch } from 'vue';
import { reasonList } from '../common.js';

const props = defineProps(['visible', 'comments']);
const emit = defineEmits(['update:visible', 'ok', 'cancel']);

const visible = ref(props.visible);
watch(visible, newVal => emit('update:visible', newVal));

const formState = ref(R.last(props.comments));
const formElem = ref();

function cancel() {
  emit('cancel', formState.value);
  visible.value = false;
}

function confirm() {
  formElem.value
  .validate()
  .then(() => {
    emit('ok', formState.value);
    visible.value = false
  })
  .catch(() => {});
}
</script>

<template>
  <a-modal
    :visible="visible"
    centered
    :width="400"
    title="批注"
    :closable="false"
    class="judge-modal">

    <a-form
      ref="formElem"
      :model="formState"
      layout="vertical">
      <a-form-item required label="错误原因" name="rejectReason">
        <a-radio-group v-model:value="formState.rejectReason">
          <template v-for="item in reasonList">
            <a-radio-button :value="item">{{ item }}</a-radio-button>
          </template>
        </a-radio-group>
      </a-form-item>
      
      <a-form-item label="详细描述" name="remark">
        <a-textarea
          v-model:value="formState.remark"
          :auto-size="{ minRows: 3 }"
          placeholder="请输入详细错误原因"
          show-count
          :maxlength="100"
        >
        </a-textarea>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button @click="cancel">取消</a-button>
      <a-button type="primary" @click="confirm">确定</a-button>
    </template>
  </a-modal>
</template>


